<template>
    <div id="goodDetail">
        <my-head title="商品详情"></my-head>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <img :src="detail.pic" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img :src="detail.s_pic" alt="">
            </van-swipe-item>
        </van-swipe>
        <div>
            <p>{{detail.title}}</p>
        </div>
        <van-goods-action>
            <van-goods-action-icon icon="wap-home-o" text="店铺" />
            <van-goods-action-icon icon="cart-o" :badge="count" text="购物车" />
            <van-goods-action-icon icon="service-o" text="客服" />
            <van-goods-action-button type="primary" @click="addCart" text="加入购物车" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
import { getDetail } from '../utils/api'
import myHead from '@/components/head'
export default {
    name: 'goodDetail',
    components: {
        myHead
    },
    data() { 
        return {
            detail: {},
            count: 0,
            oldData: []
        }
    },
    created() {
        this.oldData = JSON.parse(localStorage.getItem('list')) || [];
        this.count = this.oldData.length
        getDetail(this.$route.query.id).then(res => {
            // console.log(res)
            this.detail = res
        })
    },
    methods:{
        addCart() {
            
            this.oldData.push(this.detail)
            this.count = this.oldData.length
            localStorage.setItem('list', JSON.stringify(this.oldData))
        }
    },
}
</script>

<style lang="scss" scoped>
#goodDetail{
    font-size: .3rem;
}
img{
    width: 100%;
}
/deep/ .van-goods-action-button--first, .van-goods-action-button--last {
    border-radius: 0;
    margin: 0;
    height: 1rem;
    font-size: .32rem;
}
</style>